<template>
  <view>
    <view class="content">
      <view class="banner">
        <swiper
          class="swiper"
          indicator-active-color="#fff"
          indicator-dots="true"
          circular
          autoplay="true"
          interval="3000"
          duration="1000"
        >
          <swiper-item v-for="(item, i) in imageArray" :key="i">
            <image :src="item" mode="aspectFit" style="width: 100%"></image>
          </swiper-item>
        </swiper>
      </view>
      <view class="sec1">
        <view class="sec1-t">{{ info.name }}</view>
        <view class="sec1-pr">
          <view class="sec1-r">
            ￥{{ info.price }}
            <view class="orprice">￥{{ info.original_price }}</view></view
          >
        </view>
        <view class="sec1-pr">
          <view class="sec1-r yunf">
            运费：
            <text v-if="info.freight == 0">包邮</text>
            <text v-else>邮费:{{ info.freight }}元</text>
          </view>
          <view class="kucn">库存{{ info.num }}件</view>
        </view>
      </view>
      <view class="sec2 sec2-comm" v-if="show">
        <view class="sec2-t">
          <text>用户评价</text>
        </view>
        <view class="zwData">
          <image
            class="zwimg"
            src="https://www.123qifu.com/onlineimages/static/Shopping/sppj.png"
            mode=""
          />
          <view class="txt">商品暂无评价</view>
        </view>
      </view>
      <view class="sec2" v-if="!show">
        <view class="sec2-t">
          <text>用户评价</text>
          <view class="more" @click="more">
            更多
            <image
              class="img"
              src="https://www.123qifu.com/onlineimages/static/x92.png"
              mode=""
            />
          </view>
        </view>
        <view class="sec2-tou">
          <image class="img" :src="commsg.user_avatar" mode="" />
          <view class="sec2-tit">
            <text>{{ commsg.nickname }}</text>
            <view class="time">{{
              (commsg.createtime || "") | formatDate
            }}</view>
          </view>
        </view>
        <view class="sec2-des">{{ commsg.content }}</view>
        <view class="sec2-img">
          <image
            v-for="(item, i) in images"
            :key="i"
            class="img"
            :src="item"
            mode="aspectFill"
            @click="previewImage(i)"
          />
        </view>
      </view>
      <view class="sec3-deta">
        <image
          class="img-t"
          src="https://www.123qifu.com/onlineimages/static/Shopping/spxq.png"
          mode=""
        />
        <view class="sec3-list" v-html="info.goods_content"></view>
      </view>
      <view class="btnw">
        <view class="btns" @click="Buynow">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      info: "",
      imageArray: [],
      show: false,
      commlist: [],
      commsg: "",
      images: "",
    };
  },
  onLoad(e) {
    this.id = e.id;
    if (this.id) {
      this.goodsInfo();
      this.getComments();
    }
  },
  methods: {
    // 获取商品详情信息
    async goodsInfo() {
      const res = await this.$myRequest({
        url: "goods/info",
        method: "POST",
        data: {
          id: this.id,
        },
      });

      if (res.data.code == 1) {
        this.info = res.data.data.goods;
        this.imageArray = this.info.imageArray;
        uni.setStorage({
          key: "goodsInfo",
          data: this.info,
        });
      }
    },
    // 获取商品评论信息
    async getComments() {
      const res = await this.$myRequest({
        url: "goods/getComments",
        method: "POST",
        data: {
          id: this.id,
        },
      });

      if (res.data.code == 1) {
        this.commlist = res.data.data.data.splice(0, 1);
        if (this.commlist.length == 0) {
          this.show = true;
        } else {
          this.commsg = this.commlist[0];
          this.images = this.commlist[0].images;
          this.show = false;
        }
      }
    },
    // 更多评论
    more() {
      uni.navigateTo({
        url: "./Usercomments?id=" + this.id,
      });
    },
    // 立即购买
    Buynow() {
      uni.navigateTo({
        url: "./Confirmorder",
      });
    },
    // 预览图片
    previewImage(eq) {
      let getUrl = this.images;
      uni.previewImage({
        current: getUrl[eq],
        urls: getUrl,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  box-sizing: border-box;
  padding-bottom: 150rpx;
}
.content {
  overflow: hidden;
  .swiper {
    width: 750rpx;
    height: 750rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .sec1 {
    width: 100%;
    min-height: 150rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 25rpx 30rpx;
    border-bottom: 15rpx solid #eeeeee;
    overflow: hidden;
    .sec1-t {
      font-size: 30rpx;
      color: #333333;
      font-weight: bold;
    }
    .sec1-pr {
      font-size: 35rpx;
      color: #c52b2e;
      font-weight: normal;
      margin-top: 15rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .yunf {
        font-size: 26rpx !important;
        font-weight: 400;
        color: #999999;
      }
      .sec1-r {
        display: flex;
        align-items: baseline;
        font-size: 40rpx;
        .orprice {
          font-size: 22rpx;
          font-weight: 400;
          text-decoration: line-through;
          color: #999999;
          margin-left: 20rpx;
        }
        text {
          font-size: 26rpx;
          color: #999999;
          font-weight: normal;
        }
      }
      .kucn {
        font-size: 26rpx;
        color: #999999;
        font-weight: normal;
      }
    }
  }
  .sec2 {
    width: 100%;
    min-height: 120rpx;
    box-sizing: border-box;
    padding: 28rpx 30rpx;
    border-bottom: 15rpx solid #eeeeee;
    overflow: hidden;
    .sec2-t {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #eee;
      > text {
        font-size: 35rpx;
        color: #333333;
        font-weight: bold;
        position: relative;
        box-sizing: border-box;
        padding-left: 15rpx;
      }
      > text::before {
        position: absolute;
        content: "";
        width: 6rpx;
        height: 30rpx;
        background: #c52b2e;
        border-radius: 3rpx;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .more {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 25rpx;
        color: #888888;
        .img {
          display: block;
          width: 12rpx;
          height: 20rpx;
          margin-left: 10rpx;
        }
      }
    }
    .zwData {
      overflow: hidden;
      .zwimg {
        display: block;
        width: 192rpx;
        height: 104rpx;
        margin: 57rpx auto 0;
      }
      > .txt {
        text-align: center;
        margin-top: 11rpx;
        margin-bottom: 20rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
      }
    }
    .sec2-tou {
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      .img {
        display: block;
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
        margin-right: 25rpx;
      }
      .sec2-tit {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        text {
          width: 100%;
          font-size: 30rpx;
          color: #333333;
          font-weight: bold;
        }
        .time {
          width: 100%;
          font-size: 20rpx;
          color: #999999;
          margin-top: 10rpx;
        }
      }
    }
    .sec2-des {
      margin-top: 10rpx;
      font-size: 28rpx;
      color: #333333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .sec2-img {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 20rpx;
      .img {
        display: block;
        width: 220rpx;
        height: 220rpx;
        margin: 0 10rpx 10rpx 0;
        border-radius: 8rpx;
      }
    }
    &.sec2-comm {
      min-height: 320rpx;
      .imgcomm {
        display: block;
        width: 38rpx;
        height: 35rpx;
        margin-right: 15rpx;
      }
      text {
        font-size: 30rpx;
        color: #333333;
        font-weight: bold;
      }
    }
  }
  .sec3-deta {
    width: 100%;
    overflow: hidden;
    .img-t {
      display: block;
      width: 450rpx;
      height: 46rpx;
      margin: 30rpx auto;
    }
    .sec3-list {
      box-sizing: border-box;
      padding: 0 30rpx;
    }
  }
  .btnw {
    width: 100%;
    height: 100rpx;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .btns {
    width: 350rpx;
    height: 60rpx;
    background: #c52b2e;
    text-align: center;
    line-height: 60rpx;
    font-size: 30rpx;
    color: #ffffff;
    border-radius: 60rpx;
    margin: 30rpx auto;
  }
}
</style>
